<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 指令: 
						1.v-for
				
			 -->
			<div id="demo1">
				<!-- 如果只有一个参数,则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr />
			<div id="demo2">
				<!-- v-for arg1,arg2 in 数组
							arg1 : value值的数据
							arg2 : value值的下标
				 -->
				<p v-for="value,index in hobby">
					<span v-text="index+1"></span>
					------
					<span v-text="value"></span>
				</p>
			</div>
			<hr />
			<div id="demo3">
				<table border="8px" align="center" width="600px" height="500px">
					<tr>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th>家庭</th>
					</tr>
					<tr v-for="user in userlist" align="center">
						<td v-text="user.name">姓名</td>
						<td v-text="user.sex">性别</td>
						<td v-text="user.age">年龄</td>
						<td v-text="user.family">家庭</td>
					</tr>
				</table>
				
			</div>
		</div>
		 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		 <script>
			const app = new Vue({
				el : "#app",
				data : {
					hobby: ["敲代码","改bug","看别人写代码"],
					userlist : 
					[
						{
						name : "张三",
						sex : "男",
						age : 18,
						family : "单身",
						},
						{
						name : "李四",
						sex : "女",
						age : 19,
						family : "单身"
						},
						{
						name : "王五",
						sex : "男",
						age :	23,
						family :	"已婚"
						},
					]
				},
				methods: {
					
				}
			})
		 </script>
	</body>
</html>
